<template>
  <div class="box df fdc jcc aic">
    <div class="header tc fs36 fwb">登陆系统</div>
    <div class="content">
      <van-cell-group>
        <van-field :value="useInfo.username" required clearable label="用户名" placeholder="请输入用户名" @change="usernameChange"/>
        <van-field type="password" label="密码" placeholder="请输入密码" required @change="passwordChange" border="false"/>
        <div class="pr">
          <van-field center required clearable label="验证码" placeholder="请输入验证码" border="false" @change="captchaChange"></van-field>
          <div class="captchaImg" @click="changeCaptcha"><img :src="captchaImg" alt=""></div>
        </div>
      </van-cell-group>
      <div class="tc submit_btn">
        <button class="mainBgColor fs30 submit"  size="small" @click="submit">登陆</button>
      </div>
    </div>
  </div>
</template>
<script>
import uuidv1 from 'uuid/v1'
import { login } from '@/api'
import setting from '@/setting'
export default {
  data () {
    return {
      useInfo: {
        username: '',
        password: '',
        captcha: '',
        captchaId: ''
      },
      valuea: '',
      captchaImg: ''
    }
  },
  methods: {
    usernameChange (e) {
      this.useInfo.username = e.mp.detail
    },
    passwordChange (e) {
      this.useInfo.password = e.mp.detail
    },
    captchaChange (e) {
      this.useInfo.captcha = e.mp.detail
    },
    changeCaptcha () {
      this.useInfo.captchaId = uuidv1()
      this.captchaImg = setting.baseUrl + 'api/v1/sys/user/getCaptcha?id=' + this.useInfo.captchaId
    },
    async submit () {
      let message = ''
      if (this.useInfo.username === '') {
        message = '用户名'
      } else if (this.useInfo.password === '') {
        message = '密码'
      } else if (this.useInfo.captcha === '') {
        message = '验证码'
      }
      if (message) {
        wx.showToast({
          title: '请输入' + message,
          icon: 'none',
          duration: 2000
        })
      } else {
        let res = await login(this.useInfo)
        if (res.errmsg === '校验码错误') {
          this.changeCaptcha()
          wx.showToast({
            title: '校验码错误',
            icon: 'none',
            duration: 2000
          })
        } else if (res.errmsg === '用户名密码错误') {
          this.changeCaptcha()
          wx.showToast({
            title: '用户名密码错误',
            icon: 'none',
            duration: 2000
          })
        } else if (res.data.id) {
          const url = '../index/main'
          wx.switchTab({url})
          wx.setStorageSync('useInfo', res.data)
        }
      }
    }
  },
  mounted () {
    wx.removeStorageSync('useInfo')
    this.changeCaptcha()
  },
  onShareAppMessage (res) {
    return {
      title: '如是美助手',
      path: '/pages/login/main'
    }
  }
}
</script>

<style>
  .box{height: 70vh;}
  .content{width: 90%;}
  .header{margin-bottom: 15%}
  .avator{width: 100rpx;height: 100rpx;margin: 0 auto;margin-bottom: 10%}
  .avator img{width: 100%;height: 100%;border-radius: 50%;}
  .submit_btn{margin-top: 50rpx;}
  .submit_btn button{font-size: 30rpx;color: #fff}
  .captchaImg{width: 160rpx;height: 95%;position: absolute;right: 0;top: 0;background: #fff;z-index: 555;}
  .captchaImg img{width: 100%;height: 100%;}
  .pr{position: relative;}
</style>
